<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table'

import { getPointRecordType, getPointsRecord } from '@fl/api/anjutong/index'

import { formatTime } from './helper'

type RowVO = {
    createTime: string
    id: string
    mobile: string
    realName: string
    recordAmount: string
    recordName: string
}
const state = ref({
    changeTime: [],
    mobile: '',
    realName: '',
    recordType: '',
})

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 6,
        },
        label: '会员名称',
        prop: 'realName',
        valueType: 'copy',
        width: 120,
    },
    {
        colProps: {
            span: 10,
        },
        fieldProps: {
            endPlaceholder: '结束日期',
            format: 'YYYY-MM-DD',
            startPlaceholder: '开始日期',
            type: 'daterange',
        },
        label: '变更时间',
        prop: 'changeTime',
        valueType: 'date-picker',
    },
    {
        colProps: {
            span: 8,
        },
        label: '变更类型',
        options: async () => {
            const data = await getPointRecordType()
            return data.map((item: { name: string, value: number }) => {
                return {
                    label: item.name,
                    value: item.value,
                }
            })
        },
        prop: 'recordType',
        valueType: 'select',
    },
    {
        colProps: {
            span: 6,
        },
        label: '联系方式',
        prop: 'mobile',
        valueType: 'copy',
        width: 120,
    },
]
const xGrid = ref<VxeGridInstance<RowVO>>()

const gridOptions = reactive<VxeGridProps<RowVO>>({
    align: 'center',
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'id', title: 'ID' },
        { field: 'realName', title: '会员名称' },
        { field: 'mobile', title: '联系方式' },
        { field: 'createTime', title: '变更时间' },
        { field: 'recordAmount', title: '积分变更' },
        { field: 'recordName', title: '变更原因' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 400,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})

async function findList() {
    gridOptions.loading = true
    try {
        const options = {
            mobile: state.value.mobile,
            pageNo: gridOptions.pagerConfig?.currentPage,
            pageSize: gridOptions.pagerConfig?.pageSize,
            realName: state.value.realName,
            recordTimeEnd: formatTime(state.value.changeTime?.[1], 'YYYY-MM-DD 23:59:59'),
            recordTimeStart: formatTime(state.value.changeTime?.[0], 'YYYY-MM-DD 00:00:00'),
            recordType: state.value.recordType,
        }
        const data = await getPointsRecord(options)
        if (gridOptions.pagerConfig)
            gridOptions.pagerConfig.total = data?.totalElements
        gridOptions.data = data?.content
        gridOptions.loading = false
    }
    catch (error) {
        gridOptions.loading = false
    }
}
onMounted(() => {
    findList()
})
const gridEvents: VxeGridListeners<RowVO> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        findList()
    },
}
function search() {
    if (gridOptions.pagerConfig)
        gridOptions.pagerConfig.currentPage = 1
    findList()
}
</script>

<template>
    <div class="mb-30 bg-white p-30">
        <PlusForm v-model="state"
                  :columns="columns"
                  :row-props="{ gutter: 20 }"
        >
            <template #footer>
                <div class="ml-auto">
                    <el-button type="primary"
                               @click="search"
                    >
                        搜索
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </div>

    <div class="bg-white p-30">
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  v-on="gridEvents"
        />
    </div>
</template>
